import { ITodo } from "../dto";
import styles from "./index.module.less";
import { CheckCircleOutlined, ReloadOutlined } from "@ant-design/icons";
import axios from "axios";

const TodoCard = ({ todo, getAllTodos }: { todo: ITodo; getAllTodos: any }) => {
  const checkTodo = (checkStatus: boolean) => {
    axios.put("/todos/todo", { todoId: todo.id, checkStatus }).then((res) => {
      if (res.status === 200) {
        getAllTodos();
      }
    });
  };
  return (
    <div className={styles.container}>
      <span
        style={{ textDecoration: todo.is_finished ? "line-through" : "unset" }}
      >
        {todo.todo_title}
      </span>
      {todo.is_finished ? (
        <span style={{ cursor: "pointer" }} onClick={() => checkTodo(false)}>
          <ReloadOutlined />
        </span>
      ) : (
        <span style={{ cursor: "pointer" }} onClick={() => checkTodo(true)}>
          <CheckCircleOutlined />
        </span>
      )}
    </div>
  );
};

export default TodoCard;
